<template
	><!-- 问答右侧 -->
	<div class="content">
		<div class="Genericpadding Intervalvertical">
			<a href="http://" target="_blank" rel="noopener noreferrer">
				<img class="picture" src="./../assets/img/2021031002485331.png" alt="" />
			</a>
		</div>
		<div class="Genericpadding columnLayout">
			<div class="Horizontalspacing interval">
				<p class="Green bold">//</p>
				<div>数据统计</div>
			</div>
			<div class="gridrowtwo padding20">
				<div class="columnLayout minxgap">
					<div class="center maxminfont Green bold">{{ issues }}</div>
					<div class="center minfont">个问题</div>
				</div>
				<div class="columnLayout minxgap">
					<div class="center maxminfont bold">{{ answer }}</div>
					<div class="center minfont">条回答</div>
				</div>
			</div>
			<div class="Horizontalspacing space-around qalitoppaing">
				<div class="qzbuttons"> 我要提问 </div>
				<div class="qathumbs-up"> 我要回答 </div>
				<span class="qzbuttonhuis">我来回答</span>
			</div>
		</div>
		<div class="Genericpadding Intervalvertical interval">
			<div class="Horizontalspacing interval">
				<p class="Green bold">//</p>
				<div>搜索问题</div>
			</div>
			<div class="gridrowtwoauto minxgap"><input v-model="searinput" placeholder="请输入关键字" class="qasearchinput" type="text" /> <button class="qzbuttons" @click="selectfun">搜索</button></div>
			<div class="Randomtags grey">
				<router-link v-for="(item, index) in tag.slice(0, 20)" :key="index" :to="'/search/qaarticle/' + item.name"
					><el-check-tag :checked="false">{{ item.name }}</el-check-tag></router-link
				>
			</div>
		</div>
		<!-- <div class="Genericpadding Intervalvertical">
			<div class="Horizontalspacing interval">
				<p class="Green bold">//</p>
				<div>知识达人</div>
			</div>
			<ul class="ArticleBackground ThinLineLayout qatse">
				<li>
					<a class="ArticleLayout articlebt" href="http://" target="_blank" rel="noopener noreferrer">
						<div class="Horizontalspacing minxgap"
							><span class="bold center">1</span><img src="./../assets/img/avatar.png" alt="" class="pimgmins" />
							<p class="minfont center">用户昵称</p>
						</div>
						<div class="Horizontalspacing minxgap minifont Green"> <div class="iconfont icon-xiaoxi center"></div><span class="center">2</span><span class="center">次回答</span> </div>
					</a>
				</li>
				<li>
					<a class="ArticleLayout articlebt" href="http://" target="_blank" rel="noopener noreferrer">
						<div class="Horizontalspacing minxgap"
							><span class="bold center">2</span><img src="./../assets/img/avatar.png" alt="" class="pimgmins" />
							<p class="minfont center">用户昵称</p>
						</div>
						<div class="Horizontalspacing minxgap minifont Green"> <div class="iconfont icon-xiaoxi center"></div><span class="center">2</span><span class="center">次回答</span> </div>
					</a>
				</li>
				<li>
					<a class="ArticleLayout articlebt" href="http://" target="_blank" rel="noopener noreferrer">
						<div class="Horizontalspacing minxgap"
							><span class="bold center">3</span><img src="./../assets/img/avatar.png" alt="" class="pimgmins" />
							<p class="minfont center">用户昵称</p>
						</div>
						<div class="Horizontalspacing minxgap minifont Green"> <div class="iconfont icon-xiaoxi center"></div><span class="center">2</span><span class="center">次回答</span> </div>
					</a>
				</li>
				<li>
					<a class="ArticleLayout articlebt" href="http://" target="_blank" rel="noopener noreferrer">
						<div class="Horizontalspacing minxgap"
							><span class="bold center">4</span><img src="./../assets/img/avatar.png" alt="" class="pimgmins" />
							<p class="minfont center">用户昵称</p>
						</div>
						<div class="Horizontalspacing minxgap minifont Green"> <div class="iconfont icon-xiaoxi center"></div><span class="center">2</span><span class="center">次回答</span> </div>
					</a>
				</li>
				<li>
					<a class="ArticleLayout articlebt" href="http://" target="_blank" rel="noopener noreferrer">
						<div class="Horizontalspacing minxgap"
							><span class="bold center">5</span><img src="./../assets/img/avatar.png" alt="" class="pimgmins" />
							<p class="minfont center">用户昵称</p>
						</div>
						<div class="Horizontalspacing minxgap minifont Green"> <div class="iconfont icon-xiaoxi center"></div><span class="center">2</span><span class="center">次回答</span> </div>
					</a>
				</li>
				<li>
					<a class="ArticleLayout articlebt" href="http://" target="_blank" rel="noopener noreferrer">
						<div class="Horizontalspacing minxgap"
							><span class="bold center">6</span><img src="./../assets/img/avatar.png" alt="" class="pimgmins" />
							<p class="minfont center">用户昵称</p>
						</div>
						<div class="Horizontalspacing minxgap minifont Green"> <div class="iconfont icon-xiaoxi center"></div><span class="center">2</span><span class="center">次回答</span> </div>
					</a>
				</li>
			</ul>
		</div> -->
		<div class="Genericpadding Intervalvertical">
			<div class="Horizontalspacing interval">
				<p class="Green bold">//</p>
				<div>热门问题</div>
			</div>
			<ul class="ArticleBackground ThinLineLayout">
				<li v-for="(item, index) in list" :key="index" class="columnLayout minaxgap ArticleLayout">
					<router-link class="Horizontalspacing minxgap" target="_blank" rel="noopener noreferrer" :to="'/qaarticle/' + item.alias + '/' + item.id">
						<div class="iconfont icon-xiangyou minifont Green center"> </div>
						<span class="couretitle">{{ item.title }}</span>
					</router-link>
					<div class="articlebt minifont lightgray">
						<div class="Horizontalspacing minixgap">
							<div class="iconfont icon-riqi_o center"></div>
							<span>{{ item.Creationtime }}</span>
						</div>
						<div class="Horizontalspacing minixgap">
							<div class="iconfont icon-icon center"></div>
							<span>{{ item.PageView }}</span>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
import { dataRequest as api, setText } from '@/api/api'
export default {
	name: 'qaleft',
	components: {
		// 组件
	},
	data() {
		return {
			//返回值
			searinput: '',
			list: [],
			answer: 0,
			issues: 0,
			tag: [],
		}
	},
	methods: {
		// 函数
		async getdata() {
			let array = await api(['getquestionpage', { perPage: 7, offset: 'DESC', tosort: 'popularity' }])
			if (array.code == 200) {
				this.list = array.data
			}
			array = await api(['Numberofquestionsandanswers', ''])
			console.log(array)
			if (array.code == 200) {
				this.tag = array.data.tag
				this.answer = array.data.answer
				this.issues = array.data.issues
			}
		},
		selectfun() {
			if (this.searinput) {
				this.$router.push('/search/qaarticle/' + this.searinput)
			} else {
				this.$message.error('请输入关键字')
			}
		},
	},
	mounted() {
		// 生命周期:
		this.getdata()
	},
}
</script>
<style scoped>
.couretitle {
	white-space: nowrap; /* 防止换行 */
	overflow: hidden; /* 隐藏超出部分 */
	text-overflow: ellipsis; /* 添加省略号 */
	width: 260px; /* 设置容器宽度 */
}
</style>
